<template>

      <div class="bar" >
        <transition name="fade">
          <div class="innerBar" :class="{active:active}" v-show="isHide">

          </div>
        </transition>
      </div>

</template>

<script>
    export default {
        name: "loadingBar",
        data(){
          return{
            active:false,
            isHide:true
          }
        },
        mounted(){
          console.log(this.$store.state)
        },
        methods:{

        },
        watch:{
          '$store.getters._loadingBarActive'(){
            console.log(this.$store.getters._loadingBarActive)
            this.active = this.$store.getters._loadingBarActive
          },
          '$store.getters._loadingBarHidden'(){
            console.log(this.$store.getters._loadingBarHidden)
            this.isHide = this.$store.getters._loadingBarHidden
          }
        }
    }
</script>

<style scoped lang="stylus">
  .bar
    position absolute
    top 66px
    width 100%
    z-index 1000
    height 4px
    background #e3eaf6
    .innerBar
      background #2ab27b
      width 0
      height 4px
      border-radius 2px
      /*transition width linear 1.3s*/
      &.fade-enter-active, &.fade-leave-active
        transition opacity 0.3s
      &.fade-enter, &.fade-leave-to
        opacity 0
      &.active
        width 100%
        transition width linear 1.5s
</style>
